<template>
  <!-- 评论框 -->
  <div class="container border" style="padding: 15px 0 10px 0">
    <div style="margin-left: 30px;">
      <el-avatar class="border" shape="circle" style="height:50px;width:50px;" :src="speaker.avatar"></el-avatar>
      <p
        style="
        display: inline-block;
        line-height: 50px;
        margin:0 0 0 30px;
        vertical-align: top;
        font-size: 18px;
        color:#534c4c;">
        {{speaker.name}} <el-tag :disable-transitions="true">{{speaker.position}}</el-tag>
      </p>
    </div>
    <p style="margin: 20px 0 0 30px;color:#6c6868;width:90%;line-height: 25px">{{speaker.comment}}</p>
    <p style="text-align: right;margin:0 auto;width:90%;font-size: 16px;
        color:#534c4c;">{{speaker.publishTime}}</p>
  </div>
</template>

<script>
  export default {
    name: "Comment",
    props:{
      speaker:{
        type:Object,
        required: true
      }
    },
    data(){
      return {
        disableTransitions: false
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 650px;
    margin: 30px 0 0 200px;
  }

  .border {
    box-shadow: 0 2px 8px rgba(81, 66, 66, 0.52), 0 0 6px rgba(0, 0, 0, .04);
  }
</style>
